<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://struts.apache.org/tags-html-el" prefix="html-el" %>
<%@taglib uri="http://struts.apache.org/tags-bean-el" prefix="bean-el" %>
<%@taglib uri="http://struts.apache.org/tags-logic-el" prefix="logic-el" %>
<%@taglib uri="/WEB-INF/tld/application.tld" prefix="app" %>

<html-el:form action="/cadastroLocalidade.do">
	<html-el:hidden property="method" styleId="method"/>
	<table style="width:100%">
		<tr>
			<td align="center" valign="top" width="100%">
				<table style="width:600px">
					<tr>
						<td>
							<table cellpadding="1" cellspacing="4" bgcolor="#FAFAF5" style="width:100%;border:1px gray solid;border-bottom:0px">
								<tr>
									<td><b>Cadastro de Localidade</b></td>
								</tr>
							</table>				
							<table cellpadding="1" cellspacing="4" bgcolor="#FAFAF5" style="width:100%;border:1px gray solid">
								<tr>
									<td style="width:100%;padding:10px">
										<table style="width:100%">
											<tr>
												<td width="60" align="left">Nome:</td>
												<td align="left"><html-el:text property="nomeConsultar" styleId="nomeConsultar" size="30" maxlength="20"/></td>
											</tr>
											<tr>
												<td colspan="2">
													<table width="100%">
														<tr>
															<td height="10"></td>
														</tr>
														<tr>
															<td align="right">
																<html-el:button property="btnConsultar" styleClass="button" value="Consultar" onclick="consultar()"/>
																<html-el:button property="btnIncluir" styleClass="button" value="Incluir" onclick="incluirIniciar()"/>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</td>
								</tr>
								<logic-el:present name="listaResultado" scope="request">
									<tr>
										<td style="height:1px;border-bottom:1px;border-bottom-style:ridge;">&nbsp;</td>
									</tr>
									<tr>
										<td style="width:100%;height:290px;padding:10px;vertical-align:top">
											<div style="width:100%;height:300px;overflow-x:auto;">
												<table cellpadding="0" cellspacing="1" style="width:100%;">
													<tr>
														<th align="center" class="tbResultadoConsultaHeader"></th>
														<th align="center" class="tbResultadoConsultaHeader">Nome</th>
														<th align="center" class="tbResultadoConsultaHeader">Tipo</th>
														<th align="center" class="tbResultadoConsultaHeader">Cidade</th>
														<th align="center" class="tbResultadoConsultaHeader">UF</th>
													</tr>
													<logic-el:iterate id="bean" name="listaResultado" scope="request" indexId="i">
														<tr class='tbResultadoConsultaLinha${i%2}'> 
															<td width="25" align="center" class="tbResultadoConsultaInfo"><html-el:radio property="idSelecionado" value="${bean.codigo}" onclick="selectItem(this)"/></td>
															<td align="left" class="tbResultadoConsultaInfo">${bean.nome}</td>
															<td style="width:120px" align="center" class="tbResultadoConsultaInfo">${bean.tipoLocalidade.descricao}</td>
															<td style="width:150px" align="center" class="tbResultadoConsultaInfo">${bean.cidade.nome}</td>
															<td style="width:50px" align="center" class="tbResultadoConsultaInfo">${bean.cidade.uf}</td>
														</tr>
													</logic-el:iterate>
													<html-el:hidden property="idSelecionado"/>
												</table>	
											</div>							
										</td>
									</tr>
										<td style="width:100%;padding:10px;vertical-align:top">
											<table style="width:100%">
												<tr>
													<td align="right">
														<logic-el:present name="listaResultado" scope="request">
															<html-el:button property="btnAlterar" styleId="btnAlterar" styleClass="button" value="Alterar" onclick="alterarIniciar()" disabled="true"/>
															<html-el:button property="btnExcluir" styleId="btnExcluir" styleClass="button" value="Excluir" onclick="excluir()" disabled="true"/>
														</logic-el:present>
													</td>
												</tr>
											</table>
										</td>										
								</logic-el:present>
							</table> 
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<div id="dialogIncluir" data-dojo-type="dijit.Dialog" title="Localidade - Incluir">
		<table style="width:550px">
			<tr>
				<td>Nome:</td>
				<td colspan="4">
					<input type="text" id="nomeIncluir" title="Nome" size="30" maxlength="50"/>
				</td>
			</tr>
			<tr>
				<td>Tipo:</td>
				<td colspan="4">
					<app:comboTipoLocalidade name="tipoLocalidadeIncluir"/>
				</td>
			</tr>
			<tr>
				<td>Endereço:</td>
				<td>
					<input type="text" id="enderecoIncluir" title="Endereço" size="30" maxlength="50"/>
				</td>
				<td></td>
				<td>Compl:</td>
				<td>
					<input type="text" id="complementoIncluir" title="Complemento" size="13" maxlength="15"/>
				</td>
			</tr>
			<tr>
				<td>Bairro:</td>
				<td>
					<input type="text" id="bairroIncluir" title="Bairro" size="30" maxlength="30"/>
				</td>
				<td></td>
				<td>CEP:</td>
				<td>
					<input type="text" id="cepIncluir" title="CEP" size="8" maxlength="9"/>
				</td>
			</tr>
			<tr>
				<td>UF:</td>
				<td>
					<app:comboUF name="ufIncluir" onchange="carregaCidade('ufIncluir', 'cidadeIncluir')"/>
				</td>
				<td></td>
				<td>Cidade:</td>
				<td>
					<select id="cidadeIncluir" disabled="disabled" style="width:200px"/>
				</td>
			</tr>
			<tr>
				<td colspan="5" align="right">
					<html-el:button property="btnIncluir" styleClass="button" value="Incluir" onclick="incluir()"/>
				</td>
			</tr>
		</table>
	</div>
	<div id="dialogAlterar" data-dojo-type="dijit.Dialog" title="Localidade - Alterar">
		<table>
			<tr>
				<td>Nome:</td>
				<td colspan="4">
					<input type="text" id="nomeAlterar" title="Nome" size="30" maxlength="50"/>
				</td>
			</tr>
			<tr>
				<td>Tipo:</td>
				<td colspan="4">
					<app:comboTipoLocalidade name="tipoLocalidadeAlterar"/>
				</td>
			</tr>
			<tr>
				<td>Endereço:</td>
				<td>
					<input type="text" id="enderecoAlterar" title="Endereço" size="30" maxlength="50"/>
				</td>
				<td></td>
				<td>Compl:</td>
				<td>
					<input type="text" id="complementoAlterar" title="Complemento" size="13" maxlength="15"/>
				</td>
			</tr>
			<tr>
				<td>Bairro:</td>
				<td>
					<input type="text" id="bairroAlterar" title="Bairro" size="30" maxlength="30"/>
				</td>
				<td></td>
				<td>CEP:</td>
				<td>
					<input type="text" id="cepAlterar" title="CEP" size="8" maxlength="9"/>
				</td>
			</tr>
			<tr>
				<td>UF:</td>
				<td>
					<app:comboUF name="ufAlterar" onchange="carregaCidade('ufAlterar', 'cidadeAlterar')"/>
				</td>
				<td></td>
				<td>Cidade:</td>
				<td>
					<select id="cidadeAlterar" style="width:200px"/>
				</td>
			</tr>
			<tr>
				<td colspan="5" align="right">
					<html-el:button property="btnAlterar" styleClass="button" value="Alterar" onclick="alterar()"/>
				</td>
			</tr>
		</table>
	</div>
</html-el:form>
<script language="javascript">

	dojo.addOnLoad(function() {
		onFocus("nomeConsultar");
	});

	jQuery(function($){
	   $("#cepIncluir").mask("99999-999");
	   $("#cepAlterar").mask("99999-999");
	});
	
	function carregaCidade(from, to) {
		if(document.getElementById(from).value != "") {			
			require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
				xhr.post({
			        url: "cadastroCidade.do?method=carregarCombo",
			        timeout: 3000,
			        handleAs: "json",
			        content: {uf:document.getElementById(from).value},
			        load: function(data) {
			        	document.getElementById(to).disabled = false;
			        	document.getElementById(to).options.length = 0;
			        	document.getElementById(to).options[0] = new Option("Selecione...", "");
			        	for(i=0; i<data.length; i++) {
			        		document.getElementById(to).options[i+1] = new Option(data[i].nome, data[i].codigo);
			        	}
			        },
					error: function(data) {
						showAlertMessage("Erro ao realizar está operação! Tente novamente!");
			        }
			    });
			});
			
		}
	}

	function selectItem(i) {
		document.getElementById("btnAlterar").disabled = false;
		document.getElementById("btnExcluir").disabled = false;
	}
	function consultar() {
		document.forms[0].method.value = "consultar";
		document.forms[0].submit();
	}
	function incluirIniciar() {
		document.getElementById('nomeIncluir').value = "";
		document.getElementById('tipoLocalidadeIncluir').value = "";
		document.getElementById('ufIncluir').value = "";
		document.getElementById('cidadeIncluir').value = "";
		dijit.byId("dialogIncluir").show();
	}
	function incluir() {
		
		if(!mandatoryField('nomeIncluir')) {
			return false;
		}
		if(!mandatoryField('tipoLocalidadeIncluir')) {
			return false;
		}
		if(!mandatoryField('ufIncluir')) {
			return false;
		}
		if(!mandatoryField('cidadeIncluir')) {
			return false;
		}
		
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroLocalidade.do?method=incluir",
		        timeout: 3000,
		        content: {nome:document.getElementById('nomeIncluir').value,
		        	      tipoLocalidade:document.getElementById('tipoLocalidadeIncluir').value,
		        	      cidade:document.getElementById('cidadeIncluir').value,
		        	      endereco:document.getElementById('enderecoIncluir').value,
		        	      bairro:document.getElementById('bairroIncluir').value,
		        	      complemento:document.getElementById('complementoIncluir').value,
		        	      cep:document.getElementById('cepIncluir').value},
		        load: function(data, ioArgs) {
		        	alert("Localidade incluída com sucesso!");
		        },
				error: function(data, ioArgs) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
		
		dijit.byId("dialogIncluir").hide();
	}
	function alterarIniciar() {
		if(!mandatoryRadio('idSelecionado', 'Alteração')) {
			return false;
		}
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroLocalidade.do?method=alterarIniciar",
		        timeout: 3000,
		        handleAs: "json",
		        content: {idSelecionado:getSelectedRadio('idSelecionado').value},
		        load: function(data) {
		        	document.getElementById('nomeAlterar').value = data.nome;
	        	    document.getElementById('tipoLocalidadeAlterar').value = data.tipoLocalidade.codigo;
	        	    document.getElementById('cidadeAlterar').value = data.cidade;
	        	    document.getElementById('enderecoAlterar').value = data.endereco;
	        	    document.getElementById('bairroAlterar').value = data.bairro;
	        	    document.getElementById('complementoAlterar').value = data.complemento;
	        	    document.getElementById('cepAlterar').value = data.cep;
	        	    document.getElementById('ufAlterar').value = data.cidade.uf;
	        	    carregaCidade('ufAlterar','cidadeAlterar');
	        	    setTimeout(function(){
	        	    	document.getElementById('cidadeAlterar').value = data.cidade.codigo;
	        	    },200);
	        	    
					dijit.byId("dialogAlterar").show();
		        },
				error: function(data) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
	}
	function alterar() {
		if(!mandatoryField('nomeAlterar')) {
			return false;
		}
		if(!mandatoryField('tipoLocalidadeAlterar')) {
			return false;
		}
		if(!mandatoryField('ufAlterar')) {
			return false;
		}
		if(!mandatoryField('cidadeAlterar')) {
			return false;
		}
		
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroLocalidade.do?method=alterar",
		        timeout: 3000,
		        content: {idSelecionado:getSelectedRadio('idSelecionado').value,
			        	  nome:document.getElementById('nomeAlterar').value,
		        	      tipoLocalidade:document.getElementById('tipoLocalidadeAlterar').value,
		        	      cidade:document.getElementById('cidadeAlterar').value,
		        	      endereco:document.getElementById('enderecoAlterar').value,
		        	      bairro:document.getElementById('bairroAlterar').value,
		        	      complemento:document.getElementById('complementoAlterar').value,
		        	      cep:document.getElementById('cepAlterar').value},
		        load: function(data, ioArgs) {
		        	alert("Tipo Localidade alterada com sucesso!");
		        	consultar();
		        },
				error: function(data, ioArgs) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
		
		dijit.byId("dialogAlterar").hide();
	}
	function excluir() {
		if(!mandatoryRadio('idSelecionado', 'Exclusão')) {
			return false;
		}
	
		if(!confirm("Deseja realmente excluir?")) {
			return false;
		}	
		
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroLocalidade.do?method=excluir",
		        timeout: 3000,
		        content: {idSelecionado:getSelectedRadio('idSelecionado').value},
		        load: function(data, ioArgs) {
		        	alert("Localidade excluída com sucesso!");
		        	consultar();
		        },
				error: function(data, ioArgs) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
	}
	
</script>
